<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>红包雨</title>
    <link rel="stylesheet" href="style.css">


</head>
<body>
    <div class="red">
        <div class="total">
            montante: <span class="count">0</span>
            <span class="addMoney"></span>
        </div>
        <div class="time">tempo:<span class="time_content">8</span></div>
        <!-- 绘画红包 -->
        <canvas id="canvas"></canvas>
    </div>

    <div class="begin" >
        <span class="begin_btn">início</span>
    </div>
    <div class="end" >
        <span class="end_money">Quantidade total disponível：<span class="end_count"></span></span>
    </div>


    
<script type="text/javascript">
    var canvas = document.getElementById('canvas')
    var ctx = canvas.getContext('2d');
    var width = document.body.clientWidth
    var height = canvas.height
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
    // console.log(document.body.clientWidth )

    //当页面改变时，动态设置画布的宽高
    window.onresize=function(){  
        console.log(document.body.clientWidth )
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight
        // console.log(window.innerHeight)
        // console.log(ctx.height)

    } 
    
    var img = new Image()
    img.src = './redpacket2.png'
    
    //创建一个红包类
    class RedPackage {
        // 初始化红包参数,img_left时距离左边框的距离
        constructor() {
            this.img_left = parseInt(Math.random() * (width - 100 ) )
            this.img_top = -100
            this.speed = 1
            this.height = 100
            this.width = 100
            this.img = img
        }
        drawRed() {
            let that = this;
            ctx.beginPath();
            ctx.drawImage(that.img, that.img_left, that.img_top, that.height, that.width);
            ctx.save()
        }
        move() {
            this.img_top += this.speed
        }
    }
    
    
    



 
</script>

    <script src="./main.js"></script>
    <script src="./shipei.js"></script>

</body>
</html>